<template>
  <div class="searchBoxDialog">
   <div class="backbg">
    <div class="closeSearch">
      <span @click="closeSearchBox" style="padding:5px;margin-right:10px;font-size: 16px;">X</span>
    </div>
    
    <van-search
v-model="searchValue"
show-action
shape="round"
placeholder="请输入搜索关键词"
@search="onSearch"
clearable
:key="curSearch"
>
<template #action>
  <div @click="onSearch">搜索</div>
</template>
</van-search>
<div v-for="item in searchOptionsData" :key="item.goalstr" class="searchInfo">
<div v-if="item.goalstr==='ability' && abilityListshow.length && showsearchcent && searchValue && item.isSearch">
  <div class="titleText">{{item.goal}}</div>
      <div class="abilitybox">
        <div v-for="(menuinfo,indmenu) in abilityListshow" :key="menuinfo.id" class="funmenubox" @click="menuJump(menuinfo.path)">
              <div class="menuItem" :style="`background:linear-gradient(180deg,${colorArr[(indmenu+1)%8]} 100%)`">
        <svg-icon 
          slot="prefix" 
          :icon-class="menuinfo.icon?menuinfo.icon:'quickMenu'" 
          class="el-input__icon"
          style="height:32px;width:24px;color:white"
        />
      </div>
      <div class="menuText">{{menuinfo.name}}</div>
              </div>
      </div>
</div>
<div v-if="item.goalstr==='message' && messageShow.length && showsearchcent && searchValue && item.isSearch">
  <div class="titleText">{{item.goal}}</div>
  <div class="mesSearchBox">
    <div class="mesSearchBoxScroll" v-infinite-scroll="getList">
    <div
      v-for="(itemmes, index) in messageShow"
      :key="index"
      @click="turnMessage(itemmes)"
    >
      <van-swipe-cell
        @click="getCurid(itemmes.userAnnouncementId)"
        :stop-propagation="true"
      >
        <div class="mesBoxInfo">
          <span :class="['typeicon',`typecolor${itemmes.type}`]">{{mesTypeArr.length?mesTypeArr.find(arrinfo=>Number(arrinfo.value)===itemmes.type).label:''}}</span>
          <img :src="imgMes" alt="" class="mesboxleft" />
          <div class="mesboxright">
            <div
              class="leftinfoMesCss"
              :style="{
                fontSize: '15px',
                color: '#000000',
                lineHeight: '30px',
                fontWeight:'bold',
                width:itemmes.type==2?'80%':'86%'
              }"
            >
              {{ itemmes.title }}
            </div>
            <div
              class="leftinfoMesCss"
              :style="{
                fontSize: '14px',
                color: '#979797',
                lineHeight: '16px'
              }"
            >{{itemmes.contentDisplay}}</div>
          </div>
        </div>
      </van-swipe-cell>
    </div>
  </div>
  </div>
  
</div>
<div v-if="item.goalstr==='mytask' && taskShow.length && showsearchcent && searchValue && item.isSearch">
  <div class="titleText">{{item.goal}}</div>
  <div class="mesSearchBox">
    <div class="mesSearchBoxScroll" v-infinite-scroll="getMyTask">
      <div v-for="taskinfo in taskShow" :key="taskinfo.id" @click="handleDetail(taskinfo)" class="taskbox">
        <img :src="taskimg" alt="">
  <span class="taskspan">{{taskinfo.name}}</span>
</div>
  </div>
  </div>
  
</div>
    </div>
   </div>
  </div>
 </template>
 <script>
 import {getList} from "@/api/mobile/index.js";
 import { getRouters } from "@/api/menu";
 import {
getMyMessage,
delMyMessage,
getMyMessageByDictType
} from "@/api/custom/message";
import { getMyProcessInstancePage, cancelProcessInstance, createProcessInstance} from "@/api/bpm/processInstance";
 export default {
     components:{
         
     },
   props: ['searchOptionsData'],
   data() {
     return {
       abilityList:[], 
       abilityListshow:[],//功能菜单
       menuId:[],
       searchValue:'',
       showsearchcent:false,
       curSearch:Date.now(),
       messageShow:[], // 消息列表
       pageCur: 0,
    pageSize:49,
    userAnnouncementId: "",
    imgMes: require("@/assets/images/xiaoxiinfo.png"),
    taskimg:require("@/assets/images/mobiletask.png"),
    mesTypeArr:[],
    taskShow:[], //我的任务
    queryParams: {
      pageNo: 1,
      pageSize: 49,
      name: null,
      processDefinitionId: null,
      category: null,
      status: null,
      result: null,
    },
    colorArr:['#b9a0ff, #9281ff','#90cafa, #5795f8','#9ddd49, #7ecb45','#ffe06c, #ffb63d','#ffa0ce, #ec8283',
    '#ffab75, #ff7d67','#7bf9f1, #46d3f2','#79afff, #4a92ff']
     };
   },
   mounted() {
    this.getMessageType();
    this.curSearch = Date.now();
    console.log(this.searchOptionsData);
   let str = this.searchOptionsData.some(item=>{
      return item.goalstr==='ability'
    });
    if(str){
      this.getMenuList();
    }
  
   },
   watch: {
    searchValue(val){
     if(!val){
      this.abilityListshow = [];
      this.messageShow = [];
      this.taskShow = [];
     }
    }
   },
   methods: {
    // 获取功能菜单
      getMenuList(){
    getList().then((res)=>{
      let menuarr = res.data;
      let childarr = [];
      let _that = this;
        function handlerAllChecked(val){
          if(Array.isArray(val.children) && val.children.length){
               for(let i=0;i<val.children.length;i++){
                val.children[i].path = '' + val.path + '/' + val.children[i].path;
               }
               val.children.forEach(item=>{
                handlerAllChecked(item);
               });
            }else{
              childarr.push(val);
            }
        }
        menuarr.forEach(item=>{
          handlerAllChecked(item);
        })
      
        
        // console.log(childarr,'childarr');
        if(!this.$store.state.mobile.isJump){
          // 获取当前用户权限下的菜单，存储其id
          getRouters().then((response) => {
            console.log(response,'response');
        response.data.map((item) => {
          function changeChildren(item){
            _that.menuId.push(item.id);
      if (Array.isArray(item.children)) {
        item.children.map((data) => {
          changeChildren(data);
        });
      }
          }
          changeChildren(item);
        });
       // console.log(this.menuId,'this.menuId');
        this.abilityList = childarr.filter(val=>{
        return this.menuId.some(n=>{
          return n==val.id;
        });
      });
      
      });
        
      }else{
       this.abilityList = childarr;
      }
      // console.log(this.abilityList,'this.abilityList');
    })
  },
  // 获取消息类型
  getMessageType(){
          getMyMessageByDictType().then((res) => {
              if(res.code === 0){
                  this.mesTypeArr = res.data;
                  
              }   
          })
      },
      // 获取消息
      getMesList(){
        this.pageCur++;
        let params = {
      pageNo: this.pageCur,
      pageSize:this.pageSize,
      value: this.searchValue.trim(),
      statusList: '',
        types: [],
        sortord: 'DESC',
    };
    getMyMessage(params).then((res) => {
      if (res.code === 0) {
        this.messageShow.push(...res.data.list);
      }
    });
      },
      getCurid(val) {
    this.userAnnouncementId = val;
  },
  turnMessage(row) {
    if (this.$store.state.mobile.userAgent === "mobile") {
      // let path = this.$store.state.permission.routes.filter((_) => _.path === '/message')[0]?.children.filter((_) => _.meta.title === '消息详情')[0]?.path
      this.$router.push({
        path: "/message/detail",
        query: {
          id: row.id,
        },
      });
    }
  },
      // 获取我的任务
      getMyTask() {
        this.queryParams.pageNo++;
    let params = {...this.queryParams};
    params.name = this.searchValue;
    getMyProcessInstancePage(params).then(response => {
      this.taskShow.push(...response.data.list);
    });
  },
  handleDetail(row) {
    if(!this.$store.state.mobile.isJump){
      this.$router.push({ path: "/bpm/process-instance/detail", query: { id: row.id, details: 'details',tableId:row.formRecordId}});
    }
  },
  menuJump(path){
    if(!this.$store.state.mobile.isJump){
      this.$router.push(path);
    }
  },
  onSearch(){
      this.abilityListshow = this.abilityList.filter(item=>{
        return item.name.includes(this.searchValue.trim());
      });
    
      if(this.searchValue.trim()){
        this.pageCur = 0;
        this.queryParams.pageNo = 0;
        this.taskShow = [];
        this.messageShow = [];
        this.getMesList();
        this.getMyTask();
      }
this.showsearchcent = true;
  },
  closeSearchBox(){
    this.searchValue = '';
    this.showsearchcent = false;
    this.abilityListshow = [];
    this.messageShow = [];
    this.taskShow = [];
    this.pageCur = 0;
        this.queryParams.pageNo = 0;
    this.$emit('closeSearchBtn');
  }
   },
 };
 </script>
 
 <style lang="scss" scoped>
  .searchBoxDialog{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:50%;
    transform:translateX(-50%);
    z-index:99999999;
    .backbg{
      width:100%;
    height:100%;
      background:white;
      overflow-y: auto;
    }
    .closeSearch{
      margin-top:10px;
      text-align: right;
      cursor: pointer;
    }
    .searchInfo{
      width:100%;
      .titleText{
        font-size:14px;
        color: #666666;
        margin-left: 7px;
      }
    }
   .abilitybox{
    max-height:300px;
    display:flex;
    flex-wrap: wrap;
    overflow-y: auto;
    
    .funmenubox{
    display:flex;
    flex-direction: column;
    align-items: center;
    margin:10px;
    .menuItem{
      width: 50px;
  height: 50px;
  background: #1F78FE;
  border-radius: 50%;
  display:flex;
  justify-content: center;
  align-items: center;
    }
    .menuText{
      width:90px;
      overflow: hidden;
      text-overflow: ellipsis;
  white-space: nowrap;
  margin-top:5px;
  text-align: center;
    }
  }
   } 
   .mesSearchBox{
    max-height:300px;
    .mesSearchBoxScroll{
      width:100%;
      max-height:300px;
    overflow:auto;
    }
    .taskbox{
      display:flex;
      align-items: center;
      padding-left: 10px;
      height:55px;
      border-bottom: 1px solid #ccc;
      img{
        flex:none;
        width:35px;
        height:35px;
      }
      .taskspan{
        flex:1;
        overflow: hidden;
      text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: bold;
  font-size: 15px;
      }
    }
   }
   .mesBoxInfo {
display: flex;
flex-wrap: nowrap;
align-items: center;
padding: 8px 5px;
border-bottom: 0.5px solid #ccc;
position: relative;
}
.typeicon{
position:absolute;
font-size:12px;
right:0;
top:8px;
line-height: 20px;
  height: 20px;
  padding-right: 5px;
  padding-left: 10px;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  color:#909399;
background:#edf2fc;
}
.typecolor0{
color:#909399;
background:#edf2fc;
}
.typecolor1{
color:#1890ff;
background:#e8f4ff;
}
.typecolor2{
color:#67c23a;
background:#f0f9eb;
}
.typecolor3{
color:#f56c6c;
background:#fef0f0;
}
.typecolor4{
color:#e6a23c;
background:#fdf6ec;
}
.mesboxleft {
flex: none;
width: 44px;
height: 44px;
margin-right: 13px;
}
.mesboxright {
flex: 1;
height: 60px;
width: 85%;
}
.leftinfoMesCss {
height: 50%;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
  }
  @media only screen and (min-width: 768px) {
  .searchBoxDialog{
    width:375px;
    padding-top:60px;
    height:835px;
   
  }
}
 </style>
 <style>
 .leftinfoMesCss > p {
   text-overflow: ellipsis !important;
   white-space: nowrap !important;
   overflow: hidden !important;
 }
 </style>